<template>
   <div class="myShopCollection">
      <myHead :title="this.$route.query.data"></myHead>
      <div class="empty" v-if="empty">
         <img src="../../../static/img/shopno001.png" alt="">
         <p>您还没有收藏店铺喔~</p>
      </div>
      <div class="wrap">
         <van-swipe-cell :before-close="beforeClose" v-for="(x,y) in itemList" :key="y" class="lqitem" :name="y" :stop-propagation="true">
            <div class="item">
               <div class="item_left">
                  <img :src="$store.state.imgurlApi+x.door_photo_image" alt="">
               </div>
               <div class="item_right">
                  <div class="item_name"><p>{{x.config_list[0].value}}</p><p @click="jump(x)">进入店铺</p></div>
                  <div class="star">
                     <van-rate allow-half v-model="9.5/2" readonly color="#FF7005"/>
                     <p>{{9.5}}分</p>
                  </div>
                  <div class="item_type"><p v-for="r in ['炸鸡鸡串','优惠快餐']">{{r}}</p></div>
                  <p class="item_jl"><img src="../../../static/img/shangjiaweizhi.png" alt=""><span>{{space(lat,lng,x.config_list[10].value.split(',')[1],x.config_list[10].value.split(',')[0])}}</span></p>
               </div>
            </div>
            <template #right>
               <van-button square text="删除" type="danger" class="delete-button"/>
            </template>
         </van-swipe-cell>
      </div>
      <!--  询问弹窗  -->
      <van-dialog v-model="removeShow" title="确定删除吗？" show-cancel-button width="3.2rem" @confirm="confirm"></van-dialog>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";

    export default {
        name: "myDianPuCollection",
        data() {
            return {
                itemList: [],
                removeShow: false,
                state: 'no',
                lat: 34.27,
                lng: 108.95,
                empty:false
            }
        },
        components: {
            myHead
        },
        beforeCreate() {
            let vThis = this;
            // 获取当前位置经纬度
            new BMap.Geolocation().getCurrentPosition(
                function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        //通过Geolocation类的getStatus()可以判断是否成功定位。
                        vThis.lat = r.point.lat;
                        vThis.lng = r.point.lng;
                    }
                },
                {enableHighAccuracy: true}
            );
        },
        created(){
            // 请求店铺收藏列表
            this.$myAxios('index/collect_details/collect_manystore', 'post', {
                user_id:this.$myStorage.query()
            }).then(res => {
                if (res.data.state == 1) {
                    this.itemList = res.data.collect_manystore;
                    if (this.itemList.length<1) {
                        this.empty = true;
                    } else {
                        this.empty = false;
                    }
                } else {
                    this.$myNotice('网络出现了问题~');
                }
                console.log(this.itemList)
            });
        },
        methods: {
            confirm(){
                if (this.state != 'no') {
                    this.$myAxios('index/collect/collect_manystore_add','post',{
                        user_id: this.$myStorage.query(),
                        manystore_id: this.itemList[this.state].id,
                        type_form:'delete'
                    }).then(res=>{
                        if (res.data.state == 1) {
                            this.itemList.splice(this.state,1);
                            if (this.itemList.length<1) {
                                this.empty = true;
                            } else {
                                this.empty = false;
                            }
                            // 更新用户资料
                            this.$store.commit('obtainUserInfo',this.$myStorage.query())
                        }else  {
                            this.$myNotice('请检查网络~',1500)
                        }
                    });
                }
            },
            // 计算经纬度
            space(lat1, lng1, lat2, lng2) {
                var radLat1 = lat1 * Math.PI / 180.0;
                var radLat2 = lat2 * Math.PI / 180.0;
                var a = radLat1 - radLat2;
                var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
                var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
                s = s * 6378.137;
                s = Math.round(s * 10000) / 10000;
                return (s).toFixed(1)+'km'  // 单位千米
            },
            beforeClose({position, instance}) {
                switch (position) {
                    case 'left':
                    case 'cell':
                    case 'outside':
                        instance.close();
                        break;
                    case 'right':
                        this.removeShow = true;
                        this.state = instance.name;
                        break;
                }
            },
            jump(x) {
                this.$router.push({
                    name: "shopInfo",
                    query:{
                        id:x.id
                    }
                })
            }
        }
    }
</script>

<style scoped>
   .myShopCollection {
      width: 100%;
      min-height: 6.67rem;
      box-sizing: border-box;
      padding-top: .6rem;
      background-color: #F5F5F5;
   }

   .goods-card {
      margin: 0;
      background-color: white;
   }

   .delete-button {
      height: 100%;
   }

   .item {
      width: 100%;
      height: 1.2rem;
      box-sizing: border-box;
      padding: .1rem .15rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      background-color: #FFFFFF;
   }

   .lqitem {
      margin-bottom: .1rem;
   }

   .item_left {
      width: 1rem;
      height: 1rem;
      margin-right: .1rem;
   }

   .item_left > img {
      width: 100%;
   }

   .item_right {
      width: calc(100% - 1.1rem);
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: space-around;
   }

   .item_name {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
   }

   .item_name > p:nth-child(1) {
      width: 1.5rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: .14rem;
      line-height: .16rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
   }

   .item_name > p:nth-child(2) {
      width: .66rem;
      height: .27rem;
      border: .01rem solid rgba(255, 127, 36, 1);
      border-radius: .03rem;
      text-align: center;
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FB6000;
      line-height: .27rem;
   }

   .item_type {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .item_type > p {
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-right: .1rem;
   }

   .item_jl {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .item_jl > img {
      width: .1rem;
      height: .13rem;
      margin-right: .1rem;
   }

   .item_jl > span {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
   }


   /* 删除按钮 */
   >>> .van-swipe-cell__right > .van-button--normal {
      padding: 0 .15rem;
      font-size: .14rem;
   }

   >>> .van-swipe-cell__right > .van-button--danger {
      border: .01rem solid #ee0a24;
   }

   >>> .van-swipe-cell__right > .van-button {
      line-height: .42rem;
   }

   /* 弹窗 */
   /deep/ .van-dialog {
      font-size: .16rem !important;
      border-radius: .16rem !important;
      width: 3.2rem !important;

   }

   >>> .van-button--large {
      line-height: .48rem;
      height: .5rem;
   }

   >>> .van-button {
      font-size: .16rem;
      border-radius: .02rem;
   }

   >>> .van-dialog__header {
      line-height: .24rem;
   }

   >>> .van-dialog__header--isolated {
      padding: .24rem 0;
   }


   .star {
      display: flex;
      flex-flow: row;
      align-items: center;
   }

   .star > p {
      margin-left: .15rem;
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FB6000;
   }

   >>> .van-rate__icon {
      font-size: .13rem;
   }


   .empty {
      display: flex;
      flex-flow: column;
      align-items: center;
      padding-top: .3rem;
   }
   .empty>img {
      width: 70%;
      margin-bottom: .3rem;
   }
   .empty>p {
      font-size: .16rem;
      color: #999999;
   }
</style>
